<template>
  <div class="login">
    <div class="title">
    欢迎来到科大教务系统
    </div>
    <div class="count">
      <span style="color: white">账号：</span
      ><el-input
        v-model="count"
        style="width: 240px"
        placeholder="请输入账号"
      />
    </div>
    <br />
    <div class="password">
      <span style="color: white">密码：</span
      ><el-input
        v-model="password"
        style="width: 240px"
        type="password"
        placeholder="请输入密码"
        show-password
      />
    </div>
    <br/>
    <div class="mb-4">
      <el-button type="primary" @click="sublimt">登录</el-button>
      <el-button type="primary" @click="register">注册</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const count = ref("");
const password = ref("");
const router = useRouter();

console.log(count.value);
console.log(password.value);

function sublimt() {
  console.log(count.value);
}
function register() {
  router.push("/register")
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("../assets/loginBackground.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  
}

.login .title {
  position:relative;
  top: -20%;
  color:aliceblue;
  font-size: 40px;
}
</style>
